<!--
 * @Author: byron
 * @Date: 2022-01-06 00:12:14
 * @LastEditTime: 2022-05-09 18:40:36
-->
<template>
    <div class="other-inner right-main-warp" v-show="visible">
        <div class="icon-warp">
            <Icon type="" @iconHandle="iconHandle"></Icon>
        </div>
        <div class="otherapp-main">
            <div class="title-warp">
                <i
                    class="iconfont icon-pingtai_mokuai"
                    style="
                        color: #3b5999;
                        display: inline-block;
                        vertical-align: center;
                        margin-right: 8px;
                        font-size: 20px;
                    "
                ></i>
                <span style="vertical-align: center; font-size: 18px"
                    >其它客户端</span
                >
            </div>
            <div class="otherapp-category">
                <div class="android">
                    <i class="iconfont icon-app1"></i>
                    <div>安卓App</div>
                    <span class="img-warp">
                        <img src="http://image.huos77.cn/img/app.png" alt="" />
                    </span>
                </div>
                <div class="h5-html">
                    <i class="iconfont icon-h5"></i>
                    <div>H5界面</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    computed: {
        visible() {
            return this.$store.getters.otherApp
        },
    },
    methods: {
        iconHandle() {
            this.$store.commit('app/TOGGLE_OTHERAPP')
        },
    },
    data() {
        return {}
    },
}
</script>
<style lang="less" scoped>
@keyframes other-card-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.right-main-warp {
    &.other-inner {
        opacity: 0;
        animation: other-card-fade 0.6s ease-out 0.4s 1 forwards;
    }
    .icon-warp {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .otherapp-main {
        padding: 20px;
        h2 {
            margin: 0;
            text-align: left;
            font-size: 20px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #e5e8ed;
        }
        .otherapp-category {
            display: flex;
            justify-content: space-around;
            padding-top: 36px;
            text-align: center;
            div {
                position: relative;
                width: 100px;
                height: 100%;
                background-color: #fff;
                i {
                    cursor: pointer;
                }
            }
            .android {
                i {
                    display: inline-block;
                    padding: 2px 0;
                    color: blue;
                    font-size: 30px;
                }
                .img-warp {
                    width: 100px;
                    display: inline-block;
                    opacity: 0;
                    position: absolute;
                    z-index: 0;
                    top: -22px;
                    right: 50%;
                    transition: all 0.6s;
                }
                &:hover .img-warp {
                    opacity: 1;
                    right: 90%;
                }
            }

            .h5-html {
                i {
                    color: red;
                    font-size: 36px;
                }
            }
        }
    }
}
</style>
